<template>
    <div class="main proposal">
        <div class="select-box">
            <div class="clearfix">
                <div class="select" id="kucundalei">
                    <div class="th">库存大类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="kucundalei" />
                        <ul class=""></ul>
                    </div>
                </div>
                <div class="select cur" id="kucunxiaolei">
                    <div class="th">库存小类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="kucunxiaolei" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select" id="wuliaobianhao">
                    <div class="th">物料编码</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="wuliaobianhao" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">计划类别</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="jihualeibie" value="" readonly="readonly" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">智能分类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="zhinengfenlei" value="" readonly="readonly" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">供应商名称</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="gongyingshang" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">采购员</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="caigouyuan" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">Sourcing</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="sourcing" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">计划员</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="jihuayuan" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">开始日期</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="kaishiriqi" id="startDate" value="" readonly="readonly" />
                    </div>
                </div>
                <div class="select">
                    <div class="th">结束日期</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="jieshuriqi" id="endDate" value="" readonly="readonly" />
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <div class="operation">
                    <div class="query" v-on:click="proposalMap0Data(isSeach = true);proposalMap0Data1(1);proposalMap0Data2(1)">查询</div>
                    <div class="reset">重置</div>
                </div>
            </div>
        </div>
        <div class="figureChangeTab">
			<ul class="clearfix">
				<li class="fl" :class="{'figureChangeTabActive': configShow==1}" @click="configShow=1">未结订单</li>
				<li class="fl" :class="{'figureChangeTabActive': configShow==2}" @click="configShow=2">投放建议</li>
				<li class="fl" :class="{'figureChangeTabActive': configShow==3}" @click="configShow=3">提货建议</li>
			</ul>
		</div>
        <div class="title" v-show="configShow==1">未结订单</div>
        <div class="frame" v-show="configShow==1">
        	<div class="frame-loadding80" v-if="tableLoadding"></div>
        	<div class="frame-content" v-if="tableShow">
        		<table border="1" cellspacing="0" cellpadding="0" class="table">
		            <tr class="tdWidth">
		                <td width="8%"></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width="12%"></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		            </tr>
		            <tr class="thead">
		                <td>订单号</td>
		                <td>供应商</td>
		                <td>地点</td>
		                <td>审批日期</td>
		                <td>行号</td>
		                <td>物料编码</td>
		                <td>描述</td>
		                <td>行数量</td>
		                <td>可到货数量</td>
		                <td>单位</td>
		                <td>发运编号</td>
		                <td>发运行数量</td>
		                <td>需求日期</td>
		            </tr>
		            <tr v-for="tr in tableList0.items">
		                <td>{{tr.ORDER_HEADER_CODE}}</td>
		                <td>{{tr.VENDOR_NAME}}</td>
		                <td>{{tr.VENDOR_SITE}}</td>
		                <td>{{tr.APPROVED_DATE}}</td>
		                <td>{{tr.ORDER_LINE_NUM}}</td>
		                <td>{{tr.SEGMENT1}}</td>
		                <td>{{tr.DESCRIPTION}}</td>
		                <td>{{tr.QUANTITY}}</td>
		                <td>{{tr.SPARE_QUANTITY}}</td>
		                <td>{{tr.UNIT}}</td>
		                <td>{{tr.LINE_LACOTION_ID}}</td>
		                <td>{{tr.QUANTITY}}</td>
		                <td>{{tr.PROMISED_DATE}}</td>
		            </tr>
		        </table>
		        <div class="table-tr" v-if="tableList0.pages>1">
		            <div class="pageturn">
		                                共
		                <em>{{tableList0.total}}</em>
		                                条，第
		                <em>{{tableList0.page}}</em>
		                /
		                <em>{{tableList0.pages}}</em>
		                                页，跳转到第
		                <input type="text" class="pageturn-ipt" v-model="iptPage" value="" />
		                                页
		                <span class="page-turn" v-on:click="proposalMap0Data(iptPage,tableList0.page)">跳转</span>
		                <span class="page-first" v-on:click="proposalMap0Data(1,tableList0.page)">首页</span>
		                <span class="page-up" v-on:click="proposalMap0Data(tableList0.page-1>0?tableList0.page-1:1,tableList0.page)">上一页</span>
		                <span class="page-down" v-on:click="proposalMap0Data(tableList0.page+1,tableList0.page)">下一页</span>
		                <span class="page-last" v-on:click="proposalMap0Data(tableList0.pages,tableList0.page)">末页</span>
		            </div>
		        </div>
		        <!--<div class="clearfix">
		            <div class="operation">
		                <div class="gay-Btn">保存</div>
		                <div class="gay-Btn">导出未结订单到货建议</div>
		            </div>
		        </div>		-->
        	</div>
        	<div class="frame-noData" v-if="noData0">暂无数据...</div>
        </div>
        <div class="title" v-show="configShow==2">投放建议</div>
        <div class="frame"  v-show="configShow==2">
        	<div class="frame-loadding80" v-if="tableLoadding1"></div>
        	<div class="frame-content" v-if="tableShow1">
		        <table border="1" cellspacing="0" cellpadding="0" class="table">
		            <tr class="tdWidth">
		                <td width="6%"></td>
		                <td width="5%"></td>
		                <td width="6.5%"></td>
		                <td width="6.5%"></td>
		                <td width="16%"></td>
		                <td width="6.5%"></td>
		                <td width="4.5%"></td>
		                <td width="4.5%"></td>
		            </tr>
		            <tr class="thead">
		                <td>订单号</td>
		                <td>供应商</td>
		                <td>行号</td>
		                <td>物料编码</td>
		                <td>描述</td>
		                <td>单位</td>
		                <td>建议订单行数量</td>
		                <td>建议下单日期</td>
		            </tr>
		            <tr v-for="tr in tableList1.items">
		                <td>{{tr.ORDER_HEADER_CODE}}</td>
		                <td>{{tr.VENDOR_NAME}}</td>
		                <!--<td>{{tr.APPOINT_PERCENT}}</td>
		                <td>{{tr.QUARTER_PERCENT}}</td>-->
		                <td>{{tr.ORDER_LINE_NUM}}</td>
		                <td>{{tr.SEGMENT1}}</td>
		                <td>{{tr.DESCRIPTION}}</td>
		                <td>{{tr.UNIT}}</td>
		                <td>{{tr.ORDER_LINE_QUANTITY}}</td>
		                <td>{{tr.ORDER_DATE}}</td>
		                <!--<td>{{tr.LINE_LACOTION_ID}}</td>
		                <td>{{tr.SUGGEST_QUANTITY}}</td>
		                <td>{{tr.SUGGEST_DATE}}</td>-->
		            </tr>
		        </table>
		        <div class="table-tr" v-if="tableList1.pages>1">
		            <div class="pageturn">
		                                共
		                <em>{{tableList1.total}}</em>
		                                条，第
		                <em>{{tableList1.page}}</em>
		                /
		                <em>{{tableList1.pages}}</em>
		                                页，跳转到第
		                <input type="text" class="pageturn-ipt" v-model="iptPage1" value="" />
		                                页
		                <span class="page-turn" v-on:click="proposalMap0Data1(iptPage1,tableList1.page)">跳转</span>
		                <span class="page-first" v-on:click="proposalMap0Data1(1,tableList1.page)">首页</span>
		                <span class="page-up" v-on:click="proposalMap0Data1(tableList1.page-1>0?tableList1.page-1:1,tableList1.page)">上一页</span>
		                <span class="page-down" v-on:click="proposalMap0Data1(tableList1.page+1,tableList1.page)">下一页</span>
		                <span class="page-last" v-on:click="proposalMap0Data1(tableList1.pages,tableList1.page)">末页</span>
		            </div>
		        </div>
		        <!--<div class="clearfix">
		            <div class="operation">
		                <div class="gay-Btn">保存</div>
		                <div class="gay-Btn">导出新订单及到货建议</div>
		            </div>
		        </div>-->
		    </div>
        	<div class="frame-noData" v-if="noData1">暂无数据...</div>
        </div>
        <div class="title" v-show="configShow==3">提货建议</div>
        <div class="frame" v-show="configShow==3">
        	<div class="frame-loadding80" v-if="tableLoadding2"></div>
        	<div class="frame-content" v-if="tableShow2">
        		<div class="tscroll">
        			<table border="1" cellspacing="0" cellpadding="0" class="table tableScroll">
			            <tr class="tdWidth">
			                <td width="*"></td>
			                <td width="*"></td>
			                <td width="*"></td>
			                <!--<td width="17%"></td>
			                <td width="17%"></td>-->
			                <td width="30%"></td>
			            </tr>
			            <tr class="thead">
			                <td>物料</td>
			                <td>描述</td>
			                <td>未提数量</td>
			                <!--<td>已发放需求</td>
			                <td>未发放需求</td>-->
			                <td>分类</td>
			            </tr>
			            <tr v-for="(tr,index) in tableList2.items">
			            	<td rowspan="7" v-if="index%7==0" class="word-break">{{tr[0]}}</td>
			            	<td rowspan="7" v-if="index%7==0" class="overflowHidden">{{tr[1]}}</td>
			            	<td rowspan="7" v-if="index%7==0">{{tr[2]}}</td>
			            	<!--<td rowspan="7" v-if="index%7==0">{{tr[3]}}</td>
			            	<td rowspan="7" v-if="index%7==0">{{tr[4]}}</td>-->
			            	<td>{{tr[3]}}</td>
			            </tr>
			        </table>
			        <div class="scroll-box proposal-tableScroll0">
			        	<table border="1" cellspacing="0" cellpadding="0" class="table ovhideTable tableColor">
				            <tr class="tdWidth">
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="4.2%"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width="*"></td>
				                <td width=""></td>
				                <td width="*"></td>
				            </tr>
				            <tr class="thead">
				                <td>sum(7)</td>
				                <td>sum(15)</td>
				                <td v-for="tr in table2Title">{{tr}}</td>
				                <td>Planner</td>
				                <td>Buyer</td>
				                <td>sourcing</td>
				            </tr>
				            <tr v-for="(tr,index) in tableList2.items">
				                <td v-for="(td,index1) in tr" v-if="index1>3">{{td}}</td>
				            </tr>
				        </table>
			        </div>
        		</div>
        		<div class="table-tr no-Border" v-if="tableList2.pages>1">
		            <div class="pageturn">
		                                共
		                <em>{{tableList2.total}}</em>
		                                条，第
		                <em>{{tableList2.page}}</em>
		                /
		                <em>{{tableList2.pages}}</em>
		                                页，跳转到第
		                <input type="text" class="pageturn-ipt" v-model="iptPage2" value="" />
		                                页
		                <span class="page-turn" v-on:click="proposalMap0Data2(iptPage2,tableList2.page)">跳转</span>
		                <span class="page-first" v-on:click="proposalMap0Data2(1,tableList2.page)">首页</span>
		                <span class="page-up" v-on:click="proposalMap0Data2(tableList2.page-1>0?tableList2.page-1:1,tableList2.page)">上一页</span>
		                <span class="page-down" v-on:click="proposalMap0Data2(tableList2.page+1,tableList2.page)">下一页</span>
		                <span class="page-last" v-on:click="proposalMap0Data2(tableList2.pages,tableList2.page)">末页</span>
		            </div>
		        </div>
        	</div>
        	<div class="frame-noData" v-if="noData2">暂无数据...</div>
        </div>
    </div>
</template>

<script>
	import calender from '../common/js/calender';
    import common from '../common/js/common';
    import headers from './login';
    export default{
        components:{
            headers
        },
        data(){
            return{
            	tableLoadding:true,
            	tableLoadding1:true,
            	tableLoadding2:true,
            	tableShow:false,
            	tableShow1:false,
            	tableShow2:false,
                tableList0:{},
                tableList1:{},
                tableList2:{},
                table2Title:{},
                postData:{
                	"item_big_class":"",
	                "item_small_class":"",
	                "item":"",
	                "plan_class":"",
	                "category":"",
	                "buyer":"",
	                "souring":"",
	                "planner":"",
	                "demand_date":"",
	                "page":""
                },
                iptPage:"",
                postData1:{
                	"item_big_class":"",
	                "item_small_class":"",
	                "item":"",
	                "plan_class":"",
	                "category":"",
	                "buyer":"",
	                "souring":"",
	                "planner":"",
	                "demand_date":"",
	                "page":1
                },
                iptPage1:"",
                postData2:{
                	"item_big_class":"",
	                "item_small_class":"",
	                "item":"",
	                "plan_class":"",
	                "category":"",
	                "buyer":"",
	                "souring":"",
	                "planner":"",
	                "demand_date":"",
	                "page":1
                },
                iptPage2:"",
                isSeach:false,
                noData0:false,
                noData1:false,
                noData2:false,
                configShow:1
            }
        },
        methods:{
        	proposalMap0Data:function(page,oldPage){
        		var dataThis = this;
        		if(dataThis.isSeach){
        			dataThis.postData={
	                	"item_big_class":$(".select").find("input[name='kucundalei']").attr("data"),
		                "item_small_class":$(".select").find("input[name='kucunxiaolei']").attr("data"),
		                "item":$(".select").find("input[name='wuliaobianhao']").attr("data"),
		                "plan_class":$(".select").find("input[name='jihualeibie']").attr("data"),
		                "category":$(".select").find("input[name='zhinengfenlei']").attr("data"),
		                "buyer":$(".select").find("input[name='caigouyuan']").attr("data"),
		                "souring":$(".select").find("input[name='sourcing']").attr("data"),
		                "planner":$(".select").find("input[name='jihuayuan']").attr("data"),
		                "demand_date":$(".select").find("input[name='shijian']").val(),
		                "start_date":$(".select").find("input[name='kaishiriqi']").val(),
		                "end_date":$(".select").find("input[name='jieshuriqi']").val(),
		                "page":1
	                }
        		}
            	if(page != oldPage){
            		dataThis.tableLoadding = true;
            		dataThis.tableShow = false;
            		if(typeof page !="boolean"){
            			dataThis.postData.page = page;
            		}
	            	common.getData(0,common.url_constitute.proposalMap0,"post",dataThis.postData,function(data){
		                dataThis.tableLoadding = false;
		                if(data.data.code==1024){
		                	if(data.data.result.items.length<1){
		                		dataThis.tableShow = false;
		                		dataThis.noData0 = true;
		                	}else{
		                		dataThis.tableShow = true;
		                		dataThis.tableList0 = data.data.result;
		                	}

		                }
		            });
            	}
           },
           proposalMap0Data1:function(page,oldPage){
				var dataThis = this;
				if(dataThis.isSeach){
        			dataThis.postData1={
	                	"item_big_class":$(".select").find("input[name='kucundalei']").attr("data"),
		                "item_small_class":$(".select").find("input[name='kucunxiaolei']").attr("data"),
		                "item":$(".select").find("input[name='wuliaobianhao']").attr("data"),
		                "plan_class":$(".select").find("input[name='jihualeibie']").attr("data"),
		                "category":$(".select").find("input[name='zhinengfenlei']").attr("data"),
		                "buyer":$(".select").find("input[name='caigouyuan']").attr("data"),
		                "souring":$(".select").find("input[name='sourcing']").attr("data"),
		                "planner":$(".select").find("input[name='jihuayuan']").attr("data"),
		                "demand_date":$(".select").find("input[name='shijian']").val(),
		                "start_date":$(".select").find("input[name='kaishiriqi']").val(),
		                "end_date":$(".select").find("input[name='jieshuriqi']").val(),
		                "page":1
	                }
        		}
            	if(page != oldPage){
            		dataThis.tableLoadding1 = true;
            		dataThis.tableShow1 = false;
            		if(typeof page !="boolean"){
            			dataThis.postData1.page = page;
            		}
		            common.getData(1,common.url_constitute.proposalMap1,"post",dataThis.postData1,function(data){
		                dataThis.tableLoadding1 = false;
		                if(data.data.code==1024){
		                	if(data.data.result.items.length<1){
		                		dataThis.tableShow1 = false;
		                		dataThis.noData1 = true;
		                	}else{
		                		dataThis.tableShow1 = true;
		                		dataThis.tableList1 = data.data.result;
		                	}
		                }
		            });
		        }
	        },
	        proposalMap0Data2:function(page,oldPage){
				var dataThis = this;
				if(dataThis.isSeach){
        			dataThis.postData2={
	                	"item_big_class":$(".select").find("input[name='kucundalei']").attr("data"),
		                "item_small_class":$(".select").find("input[name='kucunxiaolei']").attr("data"),
		                "item":$(".select").find("input[name='wuliaobianhao']").attr("data"),
		                "plan_class":$(".select").find("input[name='jihualeibie']").attr("data"),
		                "category":$(".select").find("input[name='zhinengfenlei']").attr("data"),
		                "buyer":$(".select").find("input[name='caigouyuan']").attr("data"),
		                "souring":$(".select").find("input[name='sourcing']").attr("data"),
		                "planner":$(".select").find("input[name='jihuayuan']").attr("data"),
		                "demand_date":$(".select").find("input[name='shijian']").val(),
		                "start_date":$(".select").find("input[name='kaishiriqi']").val(),
		                "end_date":$(".select").find("input[name='jieshuriqi']").val(),
		                "page":1
	                }
        		}
            	if(page != oldPage){
            		dataThis.tableLoadding2 = true;
            		dataThis.tableShow2 = false;
            		if(typeof page !="boolean"){
            			dataThis.postData2.page = page;
            		}
		            common.getData(1,common.url_constitute.proposalMap2,"post",dataThis.postData2,function(data){
		                dataThis.tableLoadding2 = false;
		                if(data.data.code==1024){
		                	if(data.data.result.items.length<1){
		                		dataThis.tableShow2 = false;
		                		dataThis.noData2 = true;
		                	}else{
		                		dataThis.tableShow2 = true;
		                		dataThis.tableList2 = data.data.result;
		                		dataThis.table2Title = data.data.title;
		                	}
		                }
		            });
		        }
	        }
        },
        created(){
        },
        mounted(){
            common.selectFunction();
            common.setSelect();
            common.selectDate("#startDate");
            common.selectDate("#endDate");
            this.proposalMap0Data(1);
            this.proposalMap0Data1(1);
            this.proposalMap0Data2(1);

        }
    }
</script>

<style>
</style>
